<template>
  <div class="main-content" style="width:1310px">
    <div class="card" style="margin-bottom: 10px">
      <div style="display: flex; grid-gap: 20px;">
        <img :src="activity.cover" alt="" style="width: 30%; height: 250px; border-radius: 5px">
        <div style="flex:1; margin-bottom: 10px;position: relative;">
          <div style="font-weight: bold;font-size: 24px; margin-bottom: 10px;">{{activity.name}}</div>
          <div class="line5" style="color: #151515; font-size: 13px;line-height: 22px;border-radius: 10px; background-color: rgb(237,248,245);height: 120px; text-align: justify;padding:5px 5px 5px 5px;margin-bottom: 10px"><span style="font-size: 15px;color: #007c7c">活动介绍: </span>{{activity.descr}}</div>
          <div style="color: #666666"><i class="el-icon-date"></i> 时间<span style="margin-left: 5px"> {{activity.start}} ~ {{activity.end}}</span></div>
          <div style="color: #666666;"><i class="el-icon-location"></i> 地址
            <!--线上地址使用跳转链接，线下使用单纯文本-->
            <a style="color: #2a60c9; margin-left: 5px" :href="activity.address" v-if="activity.form === '线上'">{{ activity.address }}</a>
            <span style="margin-left: 5px" v-else>{{ activity.address }}</span>
            <el-tag style="margin-left: 5px" type="primary" size="mini">{{ activity.form }}</el-tag>
          </div>
          <div style="display: flex; align-items: center">
            <div style="flex: 1">
              <el-button type="info" disabled v-if="activity.isEnd" key="已结束">已结束</el-button>
              <el-button type="warning"  v-else-if="activity.isSign" @click="cancels" key="取消报名" >取消报名</el-button>
              <el-button type="success" v-else @click="sign">报 名</el-button>
            </div>

            <div style="text-align: right; flex: 1">
              <el-button type="warning" @click="like" v-if="activity.isLikes">取消点赞 {{ activity.likesCount }}</el-button>
              <el-button type="success" @click="like" v-else>点赞 {{ activity.likesCount }}</el-button>

              <el-button type="warning" @click="collect" v-if="activity.isCollect">取消收藏 {{ activity.collectCount }}</el-button>
              <el-button type="success" @click="collect" v-else>收藏 {{ activity.collectCount }}</el-button>
              <el-button type="primary">阅读量 {{ activity.readCount }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card" style="margin-bottom: 10px">
      <div style="font-weight: bold; font-size: 24px; margin-bottom: 20px; padding-left: 10px; border-left: 5px solid #2a60c9">活动详情</div>
      <div class="w-e-text">
        <div v-html="activity.content"></div>
      </div>
    </div>
    <div>
      <Comment :fid="activityId" module="活动" />
    </div>

  </div>
</template>

<script scoped>
import Comment from "@/components/Comment";
export default {
  name: "ActivityDetail",
  components: {Comment},

  data() {
    return {
      activity: {}, //博客数据
      activityId: this.$route.query.activityId,
      user: JSON.parse(localStorage.getItem("xm-user") || '{}'),
    }
  },
  created() {
    this.load()
    this.$request.put('/activity/updateReadCount/'+this.activityId)

  },
  methods: {
    cancels() {   // 单个删除
      this.$request.delete('/activitySign/delete/user/' + this.activityId + '/' + this.user.id).then(res => {
        if (res.code === '200') {   // 表示操作成功
          this.$message.success('操作成功')
          this.load()
        } else {
          this.$message.error(res.msg)  // 弹出错误的信息
        }})
    },
    collect() {
      this.$request.post("/collect/set", { fid: this.activityId , module: "活动"}).then(res => {
        if(res.code === "200"){
          this.$message.success('操作成功')
          this.load()  //刷新状态
        }else{
          this.$message.error(res.msg)
          this.load()  //刷新状态
        }
      })
    },
    like() {
      this.$request.post("/likes/set", {  fid: this.activityId , module: "活动"}).then(res => {
        if(res.code === "200"){
          this.$message.success('操作成功')
          this.load()  //刷新状态
        }else{
          this.$message.error(res.msg)
          this.load()  //刷新状态
        }
      })
    },
    sign() {
      this.$request.post("/activitySign/add", { activityId: this.activityId}).then(res => {
        if(res.code === "200"){
          this.$message.success('报名成功')
          this.load()  //刷新状态
        }else{
          this.$message.error(res.msg)
          this.load()  //刷新状态
        }
      })
    },
    load() {
      this.$request.get('/activity/selectById/' + this.activityId).then(res => {
        this.activity = res.data || {}
      })
    }
  }
}
</script>

<style scoped>
.line5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
</style>